<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.cover {
				width: 200px;
				border: 1px gainsboro solid;
				margin: 50%;
				padding: 20px;
			}

			.bu {
				background-color: gainsboro;
				width: 180px;

			}
		</style>
	</head>
	<body>
		<div class="cover">
			<form>
				<p>
					学生姓名：
					<input type="text" name="username" id="username">
				</p>
				<p>
					考试成绩：
					<input type="text" name="mark" id="mark">
				</p>
				<p>
					评语：
					<textarea row="s" cols="21" id="comment"></textarea>
					<!-- <p id="demo"></p> -->
				</p>

				<input class="bu" type="button" onclick="addScore()" value="添加" />
			</form>
		</div>
		<script type="text/javascript">
			var stuScores = []
			
			// var stuScore=[] 	应该这样初始化比较好

			function addScore() {
				var name = document.getElementById("username").value
				var score = document.getElementById("mark").value
				var comment = document.getElementById("comment").value

				if (name.length == 0) {
					window.alert("用户名为必填项")

				} else if (score.length == 0) {
					window.alert("成绩为必填项")
				} else {
					if (comment.length == 0) {
						// console.log(name+"在成绩是"+score+"老师对你的评价是"+comment)
						// 将新的学生成绩添加到stuScores
						stuScores.push({
							name: name,
							score: score,
							comment: "暂无评语"
						})
						stuScores.forEach((item) => {
							console.log(item.name + "的成绩是" + item.score + "老师的评价是：" + item.comment)
						})
					} else {
						stuScores.push({
							name: name,
							score: score,
							comment: comment,
						})
						stuScores.forEach((item) => {
							console.log(item.name + "的成绩是" + item.score + "老师的评价是：" + item.comment)
						})
					}

				}



			}
		</script>
	</body>
</html>
